<template>
  <div>
    <HomeSearch />
    <HomeGezi />
    <!-- 主打折扣  discount -->
    <section class="discount">
      <h5 class="dis_text">主打折扣</h5>
      <div class="dis_ul">
        <div class="dis_roll" v-for="item in dis_list" :key="item.con">
          <div class="dis_pic">
            <img :src="item.url" alt />
          </div>
          <p class="dis_con">{{item.name}}</p>
          <div class="dis_pri">
            <i>{{item.price}}</i>元起
          </div>
        </div>

        <div class="dis_earth">
          <router-link :to="{name:'dis'}">
          <img
            class="ear_img"
            src=""
            alt
          />
          <p class="ear_text">
             千款折扣
            <br />查看更多
          </p>
          </router-link>
        </div>
      </div>
    </section>

    <!-- 精选玩乐 ploy   -->
    <section class="ploy_A">
      <h5 class="ploy_text">精选玩乐</h5>
      <div class="ploy">
        <ul class="ploy_ul">
          <li class="ploy_li" v-for="ele in ploy_list" :key="ele.name">
            <a href="#">
              <img :src="ele.images" alt />
              <span class="ploy_name" v-text="ele.name"></span>
            </a>
          </li>
        </ul>
      </div>
    </section>

    <!--  精选攻略  strategy  -->
    <section class="strategy2">
      <div class="strategy_one">
        <h5 class="str_text">精选攻略</h5>
        <span class="str_hint">出游境安全提示</span>
      </div>
      <!-- 瀑布流  falls  -->
        <!-- 一 -->
        <div id="vm" class="pubu" v-cloak>
          <ul id="show" class="yg yg_l">
            <li v-for="(item,index) in homeList" :key="index">
              <div class="item_div">
                <img :src="item.cover" alt="">
                <div class="u_xinx">
                  <p class="title">{{item.title}}</p>
                                <div class="bottome">
                                    <p class="author">{{item.username}}</p>
                                    <p class="nums">{{item.nlikes}}</p>
                                </div>
                </div>
                            
              </div>
              <p>{{item.e_intro}}</p>
            </li>
          </ul>
		  </div>
    </section>
    <!-- 侧边图片固定定位  asi_pic-->
    <aside class="asi" v-if="istrue">
      <img class="asi_pic" src="//fes.qyerstatic.com/FlDyGAoyf98g27rxYb6uNC1idofI?imageslim" alt />
    </aside>
    <aside class="asi" v-else @click="tologout">退出登陆</aside>
  </div>
</template>

<script>
import HomeSearch from "../components/home-search.vue";
import HomeGezi from "../components/home-gezi.vue";
export default {
  name: "home",
  components: {
    HomeSearch,
    HomeGezi
  },
  data() {
    return {
       istrue: true,
      dis_list: [],
      ploy_list: [
        {
          images: "//fes.qyerstatic.com/FjhPw2CAsHhvxjAuUQvT0EjTfOTF?imageslim",
          name: "特价机票"
        },
        {
          images: "//fes.qyerstatic.com/Fh9eg1ZGwLp8GHrTbKSfjwMgUqz8?imageslim",
          name: "机酒自由行"
        },
        {
          images: "//fes.qyerstatic.com/FrnlnoQrQLokB6xx4mGmJhuz9eCf?imageslim",
          name: "当地玩乐"
        },
        {
          images: "//fes.qyerstatic.com/Fv-WDaw3GtUH1_8rcId7Bny4bwYV?imageslim",
          name: "门票票券"
        },
        {
          images: "//fes.qyerstatic.com/FuFMfHPUrw-ms3echc2_SAd1EXoP?imageslim",
          name: "日本高铁"
        },
        {
          images: "//fes.qyerstatic.com/FgxEv9eVMgiTxXvVg4-h5GjE7muR?imageslim",
          name: "WiFi电话卡"
        },
        {
          images: "//fes.qyerstatic.com/Fu9r87vH7j46Gtafrd8ohKHQEoBm?imageslim",
          name: "欧铁频道"
        },
        {
          images: "//fes.qyerstatic.com/Fnf6W8mmlmHqGnzGvu-NnM_zK-1p?imageslim",
          name: "保险频道"
        },
        {
          images: "//fes.qyerstatic.com/FnI5stm2aLT-icX075jIpjXIjKT4?imageslim",
          name: "接送机/包车"
        }
      ],
      homeList: [],
    };
  },
  methods:{
    tologout(){
       //退出登陆
      localStorage.removeItem("token");
      this.istrue = true;
    },
     async gethil(){
    // 获取首页图片的方法《主打折扣下》 
      let {data} = await this.$axios.get("http://localhost:1920/goods/hlist");
      this.dis_list=data;
    }
    
  },
  created() {
    this.gethil(); 
    this.$axios.post('/api/biu_list',{params:{
				ajaxID:'5cd8d69ef1d508c32233475c'
    }})
    .then((res)=>{
       this.homeList = res.data.data
    })
    .catch((err)=>{
    })
  },
    async beforeMount() {
    let token = localStorage.getItem("token");
    let { data } = await this.$axios.get("http://localhost:1920/users/verify", {
      params: {
        token
      }
    });
    if (data.type) {
      // 校验成功
      this.istrue = false;
    } else {
      // 校验失败
      this.istrue = true;
    }
    
  }
};
</script>

<style lang="scss" scoped>
.discount {
  height: 5rem;
  margin-top: 0.6rem;
  .dis_text {
    position: relative;
    height: 0.6rem;
    font-size: 0.4rem;
    line-height: 0.6rem;
    text-align: left;
    color: #000;
    padding-left: 0.3rem;
    padding-bottom: 0.3rem;
    font-weight: 700;
  }
  .dis_ul {
    box-sizing: border-box;
    width: 100%;
    padding: 0 15px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    .dis_roll {
      display: inline-block;
      width: 3.3rem;
      height: 3.86rem;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      background: #fff;
      margin-right: 0.18rem;
      overflow: hidden;
      .dis_pic {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 66.66%;
        img {
          position: absolute;
          top: 0;
          left: 0;
          vertical-align: top;
          width: 100%;
          height: 100%;
        }
      }
      .dis_con {
        height: 0.76rem;
        overflow: hidden;
        margin-top: 0.16rem;
        font-size: 0.3rem;
        line-height: 0.38rem;
        color: #1f2023;
        width: 100%;
        padding: 0 0.2rem;
        box-sizing: border-box;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-weight: 600;
        white-space: normal;
      }
      .dis_pri {
        margin-top: 0.12rem;
        font-size: 0.22rem;
        line-height: 0.36rem;
        height: 0.36rem;
        color: rgba(31, 32, 35, 0.4);
        padding: 0 0.2rem;
        i {
          font-size: 0.3rem;
          color: #ff7467;
          font-family: special;
        }
      }
    }
  }
  .dis_earth {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    vertical-align: top;
    margin-left: 10px;
    width: 2.3rem;
    height: 3.86rem;
    text-align: center;
    .ear_img {
      display: block;
      width: 0.6rem;
      height: 0.6rem;
      margin: 0 auto;
    }
    .ear_text {
      height: 0.76rem;
      overflow: hidden;
      margin-top: 0.16rem;
      font-size: 0.3rem;
      line-height: 0.38rem;
      color: #1f2023;
      width: 100%;
      padding: 0 0.2rem;
      box-sizing: border-box;
    }
  }
}
.ploy_A {
  height: 3.9rem;
  margin-top: 0.6rem;
  .ploy_text {
    position: relative;
    height: 0.6rem;
    font-size: 0.4rem;
    line-height: 0.6rem;
    text-align: left;
    color: #000;
    padding-left: 0.3rem;
    padding-bottom: 0.3rem;
    font-weight: 700;
  }
  .ploy {
    height: 3rem;
    font-size: 16px;
    .ploy_ul {
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0 0.3rem;
      .ploy_li {
        flex: 0 0 33.33%;
        width: 33.33%;
        height: 1rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        a {
          display: block;
          position: relative;
          width: 2.18rem;
          height: 0.8rem;
          padding: 0.15rem;
          border: 1px solid rgba(0, 0, 0, 0.1);
          box-sizing: border-box;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
          border-radius: 6px;
          font-size: 0.28rem;
          line-height: 0.28rem;
          color: rgba(0, 0, 0, 0.8);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          img {
            width: 0.6rem;
            height: 0.5rem;
            position: absolute;
            right: 0.06rem;
            bottom: 0;
            display: block;
          }
          .ploy_name {
            font-size: 0.28rem;
            line-height: 0.28rem;
            color: rgba(0, 0, 0, 0.8);
          }
        }
      }
    }
  }
}
.strategy2 {
  margin-top: 0.6rem;
  .strategy_one {
    display: flex;
    height: 0.9rem;
    margin-bottom: 0.3rem;
    justify-content: space-between;
    align-items: center;
    .str_text {
      display: inline-block;
      height: 0.6rem;
      font-size: 0.4rem;
      line-height: 0.6rem;
      text-align: left;
      color: #000;
      padding-left: 0.3rem;
      padding-bottom: 0.1rem;
      font-weight: 700;
    }
    .str_hint {
      display: inline-block;
      width: 2.66rem;
      height: 0.46rem;
      line-height: 0.46rem;
      font-size: 0.24rem;
      color: #fff;
      background: #02db94;
      margin-right: 0.4rem;
      border-radius: 0.4rem;
      text-align: center;
      &::before {
        content: "";
        display: inline-block;
        background: url(//fes.qyerstatic.com/FoHcIRgBY9BWd6lSLxr6NVArmEaL);
        background-size: 0.28rem 0.28rem;
        vertical-align: -2px;
        height: 0.28rem;
        width: 0.28rem;
        margin-right: 4px;
      }
      &::after {
        content: "";
        display: inline-block;
        background: url(//fes.qyerstatic.com/FkvmdDl4snzkbZzyQCrfMQMBeicW);
        background-size: 0.14rem 0.22rem;
        width: 0.14rem;
        height: 0.22rem;
        margin-left: 3px;
        vertical-align: -1px;
      }
    }
  }
    .pubu{
      margin: .26rem .26rem 0;
      box-sizing: border-box;
			// width: calc(100% - 16px);
			margin-left: 8px;
		}
		.yg img{
			width:100%;
			border-radius: 8px 8px 0 0;
		}
		.yg p{
			padding: 0 8px;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			color: #999;
		}
		.yg {
      column-gap:10px;
			column-count:2;
		}
		.yg li{
			-moz-page-break-inside:avoid;
			-webkit-column-break-inside:avoid;
			break-inside:avoid;
			margin-bottom: 10px;
			background: #fff;
			border-radius: 8px;
			padding-bottom: 70px;
			box-shadow: 0 0 5px rgba(0,0,0,.1);
		}
		.yg li .item_div{
			position: relative;
		}
		.u_xinx{
			position: absolute;
		}
		.u_xinx .title{
			    height: .84rem;
                font-size: 14px;
                line-height: .42rem;
                color: #000;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                font-weight: 600;
		}
		.bottome {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            height: 30px;
            line-height: 30px;
        }
  
}
.asi {
  width: 2.74rem;
  height: 1.25rem;
  font-size: 0.42rem;
  color: #02db94;
  position: fixed;
  right: 0;
  bottom: 8%;
  .asi_pic {
    width: 100%;
    height: 100%;
  }
}
</style>
